<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>工程管理</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<style>
			h5 {
				margin: 5px 7px;
			}
		</style>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
	<link rel="stylesheet" href="../css/mui.min.css">
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">添加工程</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<!--<h4 >工程名称</h4>-->
					<label class="mui-ellipsis">工程名称:</label>
					<input type="text" id="proname" class="mui-input-clear" placeholder="请输入工程名称">
				</div>
				<div class="mui-input-row" style="margin: 10px 5px;">
					<label class="mui-ellipsis">其他信息:</label>
					<textarea id="otherinfo" rows="5" placeholder="多行文本框"></textarea>
				</div>
				<div>
					<p class="heading">图片信息：</p>
			<ul id="files" style="text-align:left;">
				<p id="empty" style="font-size:12px;color:#C6C6C6;">无上传图片</p>
			</ul>
			  <div class="showimg" >

            </div>
			<table style="width:100%;">
				<tbody>
					<tr>
						<td style="width:40%"><div class="button button-select" onclick="appendByCamera()">拍照</div></td>
						<td style="width:40%"><div class="button button-select" onclick="appendByGallery()">相册选取</div></td>
					</tr>
				</tbody>
			</table>
			
				</div>
				<div class="mui-button-row">
					<button type="button" class="mui-btn mui-btn-primary" id="btnSave">确认</button>&nbsp;&nbsp;
					<button type="button" class="mui-btn mui-btn-danger" onclick="mui.back();">取消</button>
				</div>
			</form>
		</div>
	</body>

	<script src="../js/mui.min.js"></script>
	<script src="../js/wf.js"></script>
	<script src="../js/zepto.min.js"></script>
	<script src="../js/binaryajax.js" type="text/javascript" charset="utf-8"></script>
    	<script src="../js/exif.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/canvasResize.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	var f1 = new Array();
		(function(doc) {
			mui.init();

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var username = self.username;
				var value=self.value;
				$("#btnSave").on("tap", function() {
					if ($("#proname").val() == "") {
						event.detail.gesture.preventDefault(); //阻止默认事件
						mui.toast("工程名称不能为空!");
						mui.focus($("#proname"));
						return;
					}
					var datas = new Object();
					datas.ProName = $("#proname").val();
					datas.OtherInfo = $("#otherinfo").val();
					datas.FileArr=f1.toString();
					datas.CreatePeople = username;
					datas.isModify = 0;
					datas.value=value;
					plus.nativeUI.showWaiting();
					wf.ajax("Project/ProjectAdd", {
						traditional: true,
						type: "post",
						data: datas,
						dataType: "json",
						success: function(resule) {
							if (resule.Code == "20000") {
								mui.toast(resule.Msg);
								plus.nativeUI.closeWaiting();
								refreshParent();
							}else{
								mui.toast(resule.Msg);
								plus.nativeUI.closeWaiting();
							}
							
						}
					});
				});
			});
		}(document));

		function refreshParent() {
			var main = plus.webview.getWebviewById('projectlistsub'); //或者通过A页面id获取A页面对象
			main.reload(true);
			mui.fire(main, "pageflowrefresh");
			mui.back();
		}
		// 拍照添加文件
		function appendByCamera(){	
			var cmr = plus.camera.getCamera();
	        cmr.captureImage(function(p) {
		            plus.io.resolveLocalFileSystemURL(p, function(entry) {
		            var localurl = entry.toLocalURL(); //把拍照的目录路径，变成本地url路径，例如file:///........之类的。
		            appendFile(localurl);
	            	});
		        }, function(e) {
		        mui.toast("很抱歉，获取失败 "+e);
	    	});
		}
		// 从相册添加文件
		function appendByGallery(){
			plus.gallery.pick(function(p){
		        appendFile(p);
		    });
		}
	
	 
		function showImg(url) {
			if(f1.length>0){
				mui.toast("仅支持上传一张图片！");
				return null;
			}
			plus.nativeUI.showWaiting();
		    // 兼容以“file:”开头的情况
		    if (0 != url.toString().indexOf("file:///")) {   	
		        url = "file://" + url;
		      }
		    var _div_ = document.getElementsByClassName("showimg")[0];
		    var _img_ = new Image();
		    _img_.src = url; // 传过来的图片路径在这里用。
		        _img_.onclick = function() {
		                plus.runtime.openFile(url);
		            };
		    _img_.onload = function() {
		        var tmph = _img_.height;
		        var tmpw = _img_.width;
		        var isHengTu = tmpw > tmph;
		        var max = Math.max(tmpw, tmph);
		        var min = Math.min(tmpw, tmph);
		        var bili = min / max;
		        if (max > 1200) {
		            max = 1200;
		            min = Math.floor(bili * max);
		        }
		        tmph = isHengTu ? min : max;
		        tmpw = isHengTu ? max : min;
		        _img_.style.border = "1px solid rgb(200,199,204)";
		        _img_.style.margin = "10px";
		        _img_.style.width = "90%";
//		        _img_.style.height = "80px";
		        _img_.onload = null;
		        plus.io.resolveLocalFileSystemURL(url, function(entry) {
		                entry.file(function(file) {
		                    console.log(file.size + '--' + file.name);
		                    canvasResize(file, {
		                        width: tmpw,
		                        height: tmph,
		                        crop: false,
		                        quality: 20, //压缩质量
		                        rotate: 0,
		                        callback: function(data, width, height) {
		                            f1.push(data);
		                            console.log(data.toString());
		                            _img_.src = data;
		                            _div_.appendChild(_img_);
		                            plus.nativeUI.closeWaiting();
		                        }
		                    });
		                });
		            },
		            function(e) {
		                plus.nativeUI.closeWaiting();
		                console.log(e.message);
		            });
		    };
		};
		
		function uploadpics(url){
			var img=new Image();
			img.src=url;
			img.onload=function(){
				
				var that=img;
				var w=that.width,
				h=that.height,
				scale=w/h;
				w=320||w;
				h=w/scale;
				var canvas=document.createElement('canvas');
				var ctx=canvas.getContext('2d');
				$(canvas).attr({
					width:w,
					height:h
				})
				ctx.drawImage(that,0,0,w,h);
				var base64=canvas.toDataURL('image/jpeg',1||0.8);
				f1.push(base64);
			}
			
		}
					
		// 添加文件
	
		function appendFile(p){			
			empty.style.display="none";
			showImg(p);	
		}
	</script>

</html>